﻿<template>
	<div class="deviceSlaveTemplatePoints-container">
		<el-dialog v-model="isShowDialog" :width="800" draggable="" :close-on-click-modal="false">
			<template #header>
				<div style="color: #fff">
					<!--<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit /> </el-icon>-->
					<span>{{ props.title }}</span>
				</div>
			</template>
			<el-form :model="ruleForm" ref="ruleFormRef" label-width="auto" :rules="rules">
				<el-row :gutter="35">
					<el-form-item v-show="false">
						<el-input v-model="ruleForm.id" />
					</el-form-item>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="变量名字" prop="pointName">
							<el-input v-model="ruleForm.pointName" placeholder="请输入变量名字" maxlength="100" show-word-limit
								clearable />

						</el-form-item>

					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" v-if="false">
						<el-form-item label="设备从机模板Id" prop="deviceSlaveTemplateId">
							<el-select clearable filterable v-model="ruleForm.deviceSlaveTemplateId"
								placeholder="请选择设备从机模板Id">
								<el-option v-for="(item, index) in deviceSlaveTemplateDeviceSlaveTemplateIdDropdownList"
									:key="index" :value="item.value" :label="item.label" />

							</el-select>

						</el-form-item>

					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="变量标识符" prop="dataIdentifier">
							<el-input v-model="ruleForm.dataIdentifier" placeholder="请输入变量标识符" maxlength="32"
								show-word-limit clearable />
						</el-form-item>

					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="数据类型" prop="dataType">
							<el-select clearable v-model="ruleForm.dataType" placeholder="请选择数据类型">
								<el-option v-for="(item, index) in dl('DataType')" :key="index"
									:value="Number(item.value)"
									:label="`${item.name} (${item.code}) [${item.value}]`"></el-option>

							</el-select>

						</el-form-item>

					</el-col>
					<!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="长度" prop="len">
							<el-input v-model="ruleForm.len" placeholder="请输入长度" maxlength="32" show-word-limit clearable />
							
						</el-form-item>
						
					</el-col> -->
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="寄存器地址" prop="reg">
							<el-input v-model="ruleForm.reg" placeholder="请输入寄存器地址" maxlength="32" show-word-limit
								clearable />

						</el-form-item>

					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="寄存器类型" prop="regType">
							<el-select clearable v-model="ruleForm.regType" placeholder="请选择寄存器类型">
								<el-option v-for="(item, index) in dl('RegType')" :key="index"
									:value="Number(item.value)"
									:label="`${item.name} (${item.code}) [${item.value}]`"></el-option>

							</el-select>

						</el-form-item>

					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="变量类型" prop="varType">
							<el-input v-model="ruleForm.varType" placeholder="请输入变量类型" maxlength="32" show-word-limit clearable />
							
						</el-form-item>
						
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="单位" prop="unit">
							<el-input v-model="ruleForm.unit" placeholder="请输入单位" maxlength="32" show-word-limit
								clearable />

						</el-form-item>

					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="读写属性" prop="readWrite">
							<el-select clearable v-model="ruleForm.readWrite" placeholder="请选择读写属性">
								<el-option v-for="(item,index) in dl('ReadWrite')" :key="index" :value="Number(item.value)" :label="`${item.name} (${item.code}) [${item.value}]`"></el-option>
								
							</el-select>
							
						</el-form-item>
						
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="存储方式" prop="store">
							<el-select clearable v-model="ruleForm.store" placeholder="请选择存储方式">
								<el-option v-for="(item, index) in dl('StoreType')" :key="index"
									:value="Number(item.value)"
									:label="`${item.name} (${item.code}) [${item.value}]`"></el-option>
							</el-select>

						</el-form-item>

					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="采集频率" prop="cycle">
							<el-select clearable v-model="ruleForm.cycle" placeholder="请选择采集频率">
								<el-option v-for="(item, index) in dl('CycleType')" :key="index"
									:value="Number(item.value)"
									:label="`${item.name} (${item.code}) [${item.value}]`"></el-option>
							</el-select>
						</el-form-item>

					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="精确几位" prop="precisionEnum">
							<el-select clearable v-model="ruleForm.precisionEnum" placeholder="请选择精确几位">
								<el-option v-for="(item, index) in dl('PrecisionEnum')" :key="index"
									:value="Number(item.value)"
									:label="`${item.name} (${item.code}) [${item.value}]`"></el-option>

							</el-select>

						</el-form-item>

					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						
							<el-tooltip class="box-item" effect="dark" content="设备上行数据经采集公式计算后显示 。公式中的%s为占位符，是固定字段。
如：
加：%s+10
减：%s-10
乘：%s*10
除：%s/10
余数：%s%10"
								placement="top">
								<el-form-item prop="formula" label="采集公式">
								<el-input v-model="ruleForm.formula" placeholder="请输入采集公式" maxlength="32"
									show-word-limit clearable />
						


						</el-form-item>
					</el-tooltip>

					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-tooltip class="box-item" effect="dark" content="主动向设备写数据经控制公式计算后下发 。

公式中的%s为占位符，是固定字段。
如：
加：%s+10
减：%s-10
乘：%s*10
除：%s/10
余数：%s%10"
								placement="top">
						<el-form-item label="控制公式" prop="reFormula">
							<el-input v-model="ruleForm.reFormula" placeholder="请输入控制公式" maxlength="32" show-word-limit
								clearable />

						</el-form-item>
					</el-tooltip>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="cancel">取 消</el-button>
					<el-button type="primary" @click="submit">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<style lang="scss" scoped>
:deep(.el-select),
:deep(.el-input-number) {
	width: 100%;
}
</style>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import type { FormRules } from "element-plus";
import { getDictDataItem as di, getDictDataList as dl } from '/@/utils/dict-utils';
import { getDictLabelByVal as dv } from '/@/utils/dict-utils';
import { formatDate } from '/@/utils/formatTime';
import { addDeviceSlaveTemplatePoints, updateDeviceSlaveTemplatePoints, detailDeviceSlaveTemplatePoints } from "/@/api//Device/Template/deviceSlaveTemplatePoints";
import { getDeviceSlaveTemplateDeviceSlaveTemplateIdDropdown } from '/@/api//Device/Template/deviceSlaveTemplatePoints';
import { getAPI } from '/@/utils/axios-utils';
import { SysEnumApi } from '/@/api-services/api';

//父级传递来的参数
var props = defineProps({
	title: {
		type: String,
		default: "",
	},
	deviceSlaveTemplateId: {
		type: String,
		default: "",
	},
});
//父级传递来的函数，用于回调
const emit = defineEmits(["reloadTable"]);
const ruleFormRef = ref();
const isShowDialog = ref(false);
const ruleForm = ref<any>({});
//自行添加其他规则
const rules = ref<FormRules>({
	pointName: [{ required: true, message: '请输入变量名字！', trigger: 'blur', },],
	reg: [{ required: true, message: '请输入寄存器地址！', trigger: 'blur', },],
	cycle: [{ required: true, message: '请输入采集频率！', trigger: 'blur', },],
});

// 页面加载时
onMounted(() => {
	getDeviceSlaveTemplateDeviceSlaveTemplateIdDropdownList();
	if (props.deviceSlaveTemplateId) {
		ruleForm.value.deviceSlaveTemplateId = props.deviceSlaveTemplateId;
	}
});

// 打开弹窗
const openDialog = async (row: any) => {
	// ruleForm.value = JSON.parse(JSON.stringify(row));
	// 改用detail获取最新数据来编辑
	let rowData = JSON.parse(JSON.stringify(row));
	if (rowData.id)
		ruleForm.value = (await detailDeviceSlaveTemplatePoints(rowData.id)).data.result;
	else
		ruleForm.value = rowData;
	isShowDialog.value = true;
};

// 关闭弹窗
const closeDialog = () => {
	emit("reloadTable");
	isShowDialog.value = false;
};

// 取消
const cancel = () => {
	isShowDialog.value = false;
};

// 提交
const submit = async () => {
	ruleFormRef.value.validate(async (isValid: boolean, fields?: any) => {
		if (isValid) {
			let values = ruleForm.value;
			if (ruleForm.value.id == undefined || ruleForm.value.id == null || ruleForm.value.id == "" || ruleForm.value.id == 0) {
				await addDeviceSlaveTemplatePoints(values);
			} else {
				await updateDeviceSlaveTemplatePoints(values);
			}
			closeDialog();
		} else {
			ElMessage({
				message: `表单有${Object.keys(fields).length}处验证失败，请修改后再提交`,
				type: "error",
			});
		}
	});
};

const deviceSlaveTemplateDeviceSlaveTemplateIdDropdownList = ref<any>([]);
const getDeviceSlaveTemplateDeviceSlaveTemplateIdDropdownList = async () => {
	let list = await getDeviceSlaveTemplateDeviceSlaveTemplateIdDropdown();
	deviceSlaveTemplateDeviceSlaveTemplateIdDropdownList.value = list.data.result ?? [];
};







//将属性或者函数暴露给父组件
defineExpose({ openDialog });
</script>
